<template>
  <div class="photos-controller">
    <div class="photos-controller-button"
         :class="{ 'inverse': photo.isInverse, 'is-active': photo.isCenter }"
         v-for="photo in photos"
         @click="handleClick(photo)">
      <icon/>
    </div>
  </div>
</template>

<script>
  import Icon from './Icon'

  export default {
    name: 'photos-controller',
    components: { Icon },
    props: ['photos'],
    methods: {
      handleClick (photo) {
        this.$emit('click', photo.index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  $font-size: 18px;
  $btn-size: 1.2em;
  $color: #A7A0A2;

  .photos-controller {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;

    z-index: 2;

    max-width: 70%;
    font-size: $font-size;
    display: flex;
    justify-content: center;

    .photos-controller-button {
      display: flex;
      align-items: center;
      justify-content: center;

      width: $btn-size;
      height: $btn-size;
      border-radius: 50%;

      transition: .6s;
      background-color: $color;
      color: #FFF;

      cursor: pointer;
      user-select: none;

      + .photos-controller-button {
        margin-left: 1em;
      }

      &:hover {
        background-color: darken($color, 30%);
      }

      &.inverse {
        transform: rotateY(180deg);
      }

      &.is-active {
        font-size: 1.2em;
        background-color: darken($color, 30%);
      }
    }
  }

</style>
